<template>
	<view class="content-box">
		<!-- 头部navbar -->
		<navbar :fixed="true" :bgColor="'#fff'" :title="t('my.grxx')" :leftIcon="true"></navbar>
		
		<!-- 标签切换 -->
		<view class="tab-container">
			<view class="tab-item" :class="{ active: activeTab === 'avatar' }" @click="switchTab('avatar')">
				{{ t('my.tx') }}
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'username' }" @click="switchTab('username')">
				{{ t('my.yhm') }}
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'email' }" @click="switchTab('email')">
				{{ t('my.yx') }}
			</view>
		</view>
		
		<!-- 头像选择区域 -->
		<view class="avatar-section" v-if="activeTab === 'avatar'">
			<!-- 当前选中的头像 -->
			<view class="selected-avatar">
				<image class="avatar-preview" :src="selectedAvatarUrl" :style="{ backgroundColor: selectedColor }"></image>
			</view>
			
			<!-- 选择头像 -->
			<text class="section-title">{{ t('my.xztx') }}</text>
			<view class="avatar-grid">
				<view v-for="index in 15" :key="index" class="avatar-item" :class="{ selected: selectedAvatar === index }" @click="selectAvatar(index)">
					<image class="avatar-image" :src="`/static/image/avatar/${index}.png`" :style="{ backgroundColor: selectedAvatar === index ? selectedColor : '' }"></image>
					<view class="check-icon" v-if="selectedAvatar === index"></view>
				</view>
			</view>
			
			<!-- 选择颜色 -->
			<text class="section-title">{{ t('my.xzys') }}</text>
			<view class="color-grid">
				<view v-for="(color, index) in colorList" :key="index" class="color-item" :style="{ backgroundColor: color }" :class="{ selected: selectedColor === color }" @click="selectColor(color)"></view>
			</view>
		</view>
		
		<!-- 确认按钮 -->
		<button class="confirm-btn" @click="confirmChanges">{{ t('common.confirm') }}</button>
	</view>
</template>

<script setup>
	import { useI18n } from 'vue-i18n';
	import { ref, computed } from 'vue';
	const { t, locale } = useI18n();
	
	// 当前激活的标签
	const activeTab = ref('avatar');
	
	// 切换标签
	const switchTab = (tab) => {
		activeTab.value = tab;
	};
	
	// 头像选择
	const selectedAvatar = ref(1); // 默认选择第一个头像
	
	// 颜色选择
	const colorList = [
		'#C5D3F1', // 浅蓝色
		'#C3EAC3', // 浅绿色
		'#A8E6E6', // 浅青色
		'#D7C5F0', // 浅紫色
		'#B8D1F9', // 浅蓝色
		'#D9D9D9', // 浅灰色
		'#C9CEB9', // 浅灰绿色
		'#ECC6F3', // 浅粉紫色
		'#F5F5C3', // 浅黄色
		'#D1E9D1'  // 浅绿色
	];
	const selectedColor = ref(colorList[0]); // 默认选择第一个颜色
	
	// 选择头像
	const selectAvatar = (index) => {
		selectedAvatar.value = index;
	};
	
	// 选择颜色
	const selectColor = (color) => {
		selectedColor.value = color;
	};
	
	// 计算当前选中的头像URL
	const selectedAvatarUrl = computed(() => {
		return `/static/image/avatar/${selectedAvatar.value}.png`;
	});
	
	// 确认修改
	const confirmChanges = () => {
		// 这里可以添加保存头像和颜色的逻辑
		uni.showToast({
			title: t('my.xgcg'),
			icon: 'success'
		});
	};
</script>

<style scoped lang="scss">
	.content-box {
		min-height: 100vh;
		background-color: #FFFFFF;
		padding-bottom: 100rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		padding-top: 180rpx;
	}
	
	/* 标签切换 */
	.tab-container {
		display: flex;
		justify-content: space-between;
		border-bottom: 4rpx solid #F5F6FA;
		margin-bottom: 40rpx;
		
		.tab-item {
			padding: 20rpx 0;
			font-size: 32rpx;
			color: #999999;
			position: relative;
			flex: 1;
			text-align: center;
			
			&.active {
				color: #333333;
				font-weight: 500;
				
				&::after {
					content: '';
					position: absolute;
					bottom: -4rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 60rpx;
					height: 4rpx;
					background-color: #00C9A7;
					border-radius: 2rpx;
				}
			}
		}
	}
	
	/* 头像选择区域 */
	.avatar-section {
		padding: 20rpx 0;
		
		.selected-avatar {
			display: flex;
			justify-content: center;
			margin-bottom: 40rpx;
			
			.avatar-preview {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
			}
		}
		
		.section-title {
			display: block;
			font-size: 32rpx;
			color: #333333;
			font-weight: 500;
			margin-bottom: 30rpx;
		}
		
		.avatar-grid {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 40rpx;
			
			.avatar-item {
				width: 20%;
				padding: 10rpx;
				box-sizing: border-box;
				position: relative;
				
				.avatar-image {
					width: 100%;
					height: 120rpx;
					border-radius: 50%;
				}
				
				.check-icon {
					position: absolute;
					right: 10rpx;
					bottom: 10rpx;
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					background-color: #00C9A7;
					display: flex;
					align-items: center;
					justify-content: center;
					
					&::after {
						content: '';
						width: 15rpx;
						height: 8rpx;
						border-left: 2rpx solid #FFFFFF;
						border-bottom: 2rpx solid #FFFFFF;
						transform: rotate(-45deg) translate(1rpx, -2rpx);
					}
				}
			}
		}
		
		.color-grid {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 40rpx;
			
			.color-item {
				width: 20%;
				padding: 10rpx;
				box-sizing: border-box;
				
				&::after {
					content: '';
					display: block;
					width: 100%;
					padding-bottom: 100%;
					border-radius: 50%;
				}
				
				&.selected {
					position: relative;
					
					&::before {
						content: '';
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						width: calc(100% - 20rpx);
						height: calc(100% - 20rpx);
						border: 4rpx solid #00C9A7;
						border-radius: 50%;
						box-sizing: border-box;
					}
				}
			}
		}
	}
	
	/* 确认按钮 */
	.confirm-btn {
		width: 100%;
		height: 90rpx;
		background: linear-gradient(to right, #00C9A7, #007ADF);
		border-radius: 45rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 60rpx;
		border: none;
	}
</style>